<template>
    <div>
        <header>
            <div class="l-content">
                <el-button plain icon="el-icon-menu" size="mini" @click="handlmenu"></el-button>
                <el-breadcrumb separator="/">
             <el-breadcrumb-item :to="{ path: v.path }" v-for="v in tags" :key="v.path" style="color:#fff">{{v.label}}</el-breadcrumb-item>
             </el-breadcrumb>
            </div>
            <div class="r-content">
                <el-dropdown trigger="click" szie="mini">
                    <span>
                        <img :src="userImg" class="user">
                    </span>
                    <el-dropdown-menu slot="dropdown">
    <el-dropdown-item>个人中心</el-dropdown-item>
    <el-dropdown-item @click.native="logout">退出</el-dropdown-item>
         </el-dropdown-menu>
                </el-dropdown>
            </div>
        </header>
    </div>
</template>

<script>
import { mapState } from 'vuex'
    export default {
        name:'CommonHeader',
        data() {
            return {
                userImg: require('../assets/logo.png')
            }
        },
        methods: {
            handlmenu() {
                this.$store.commit('CollapseMenu')
            },
            logout(){
                this.$store.commit('clearToken')
                this.$store.commit('clearMenu')
                this.$router.push({name:'login'})
            },
        },
        computed: {
            ...mapState({
                tags:state=>state.tabsList
            })
        },
    }
</script>

<style lang="scss" src="../assets/CommonHeader.scss">
</style>